import React, {useEffect} from "react";
import {renderRoutes} from 'react-router-config'
import {NavLink} from 'react-router-dom';
import {Provider, useSelector, useDispatch} from "react-redux";
import ProvinceCity from "./Province"
import DatePicker from './DatePicker'
import {DECREMENT, INCREMENT} from "../../reducer/actionTypes"

const ComponentUseReactRedux = () => {
  return (
      <div>
        {/*<Provider store={store}>*/}
        <ChildComponentUseReactRedux/>
        {/*</Provider>*/}
      </div>
  )
}

const ChildComponentUseReactRedux = () => {
  const test = (state) => {
    // let obj = {age: 11,a: [1,2,3], ooo: {}}
    // obj.ooo = obj
    // let newObj = cloneDeep(obj)
    return state.num
  }
  const num = useSelector(test);
  const dispatch = useDispatch();

  const addNum = () => {
    const action = {type: INCREMENT}
    dispatch(action)
  }
  const delNum = () => {
    const action = {type: DECREMENT}
    dispatch(action)
  }
  const mutNum = () => {
    const action = () => {
      return dispatch => {
        dispatch()
      }
    }
    dispatch(action)
  }
  return (
      <div>
        <h3>使用 useSelector, useDispatch</h3>
        数字: {num}
        <button onClick={() => addNum()}>+</button>
        <button onClick={() => delNum()}>-</button>
        <button onClick={() => mutNum()}>x</button>
      </div>
  );
};

export const FirstCom = (props) => {
  useEffect(() => {
    console.log("prosp", props)
    
  }, [])
  return (
      <>
      <DatePicker />
        省市联动
        <ProvinceCity/>
        <br/>
        <br/>
        <ComponentUseReactRedux/>
        <br/>
        <div> FirstCom
          <br/>
          <NavLink to="/firstcom/user">A</NavLink>
          <br/>
          <NavLink to="/firstcom/send">B</NavLink>
          {renderRoutes(props.route.children)}
        </div>
      </>

  );
}